body {
    /* max-width: 800px; */
    /* min-width: 600px; */
    width: 800px;
    --section-spacing: 1em;
    --create-link-btn-width: 20ch;
}

#btns-section {
    width: 100%;
    display: inline-flex;
    padding-bottom: 0.75em;
}

#subtitle {
    font-size: 1.25em;
}

#top-right-btns {
    margin-left: auto;
    display: inline-flex;
}

#top-right-btns > .btn {
    margin-left: 1em;
}

.section {
    width: calc(100% - var(--section-spacing));
    border-bottom: var(--section-separator);
    padding-left: var(--section-spacing);
}

.section-header {
    width: 100%;
    display: flex;
    background-color: var(--vscode-activityBar-background);
    /* background-color: var(--welcomePage-tileBackground); */
    padding-top: 0.6em;
    padding-bottom: 0.6em;
}

.section-header h3 {
    padding: 0;
    margin: 0;
    margin-left: var(--section-spacing);

    display: flex;
    align-items: center;
}

.section-header-right {
    margin-left: auto;
    margin-right: var(--section-spacing);
    display: flex;
}

.section-header-toggle {
    display: flex;
    align-items: center;
    font-weight: bold;
    margin-left: 2em;
}

.section-header-toggle input[type="image"] {
    padding: 0;
    margin-left: 1em;
    min-height: 1.25em;
}

.header-more-info {
    margin-left: auto;
    margin-right: 1em;
    display: flex;
    align-items: center;
}

.info-table {
    table-layout: auto;
    width: 100%;
    border-spacing: 0 var(--section-spacing);
}

.info-table td {
    padding: 0;
    text-align: left;
    white-space: nowrap;
    width: 100%;
}

.info-table .info-label {
    font-weight: bold;
    padding-right: 1em;

    /* https://stackoverflow.com/a/11267268/3666734 */
    width: 1%;
    white-space: nowrap;
}

.url {
    overflow-wrap: anywhere;
}

.btn-cell {
    width: 3em;
}

.btn-cell input[type="image"] {
    height: 1.75em;
    margin: 0;
    padding: 0;
    margin-left: 1em;
    vertical-align: middle;
}

#manage-logs-btn {
    font-size: 100%;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

#manage-logs-btn > input[type="image"] {
    height: 1.5em;
}

/* Links page */

.link-table {
    width: 100%;
}

.link-table-header {
    margin-top: var(--section-spacing);
    margin-bottom: var(--section-spacing);
    display: flex;
    align-items: center;
}

.link-table-header-text {
    padding-right: 2em;
}

#create-link-btn {
    margin-left: auto;
    width: var(--create-link-btn-width);
}

.link-table {
    border-collapse: collapse;
    margin-bottom: calc(2 * var(--section-spacing));
}

.link-table tr {
    border-bottom: 1px solid #444;
}

.link-table td {
    text-align: center;
    padding-top: 1em;
    padding-bottom: 1em;
}

#name-col {
    width: 64ch;
}

#env-var-col {
    width: 64ch;
}

#spacer-col {
    width: var(--create-link-btn-width);
}

thead td {
    font-weight: bold;
}
